<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
    
        /* 判断优先级 */
        div{
            color: red;     /* div的级元素p继承了父类div的文字颜色 */
            background: red;

            width: 200px;
            height: 200px;
            margin: 20px;
        }

        p{
            color: white;   /* 没有样式就听父类的样式，自己颜色有样式选择自己的 */
            font-size: 20px !important  /* 如果有冲突，可以手动提高到最高的优先级使用 !important，
                                添加的是一个属性上，而不是这个标签, 多个提高需要在每个属性后面单独写important*/
        }

        /* 外链式的css中设置p的话，考虑到顺序，谁在下谁生效 */
        .father{
            background: green;
        }

        /* p标签和此标签上的类选择器冲突时，id > 类选择器 > 标签选择器*/
        .son {
            color: aqua;
        }


        /* 垂直外边距合并问题margin,格子之间有冲突，间距不是80+60而是取两个之间的最大值 */
        /* 开发中，为了防止这个情况，不要在两个格子设置margin外边距，只设置一个即可 */

        .top {
            background: blue;
            margin-bottom: 80px;
        }

        .bottom {
            background: red;
            margin-top: 60px;
        }

        /* 父子格子之间，如果设置子格子margin-top的话，不会相对于父各自的border，而是整个格子向下移动 */
        .top1 {
            width: 300px;
            height: 300px;
            background: blue;
            margin-bottom: 80px;

            /* 启动內检，这样子格子就会相对父各自向下移动 */
            overflow: hidden;
        }

        .bottom1 {
            width: 100px;
            height: 100px;
            background: red;
            margin-top: 50px;
        }


        /* background的背景图片 */
        /* 美化性的图片使用background设置图片，重要的比如logo等使用img设置图片 */
        div.bg_img {

            /* 背景图定位， 背景图平铺方式，背景颜色，背景图url(路径) */
            background: center bottom no-repeat green url("../day01/images/icon4.jpg")
        }

        /* <!-- 背景图固定,图片设置在body身上,fixed保证背景图不随着垂直滚动而移动 --> */
        body {
            background: url("../day01/images/icon4.jpg") no-repeat center fixed
        }

    </style>
</head>
<body>
    
    <!-- 表格 cellspacing格子之间的距离, cellpadding格子于内容的padding-->
    <!-- td字段中使用：colspan横向合并 rowspan竖向合并 -->
    <table cellpadding="20" border="1" cellspacing="50">
        <tr>
            <td colspan="2">1</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td rowspan="2">5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <!-- <td>8</td> -->
            <td>9</td>
        </tr>
    </table>

    <!-- 各种选择器在css配置的权重优先级 -->
    <div class="father">
        <p class="son">测试权重优先级</p>
    </div>

    <!-- 多个外边距margin合并问题 -->
    <div class="top"></div>
    <div class="bottom"></div>

    <!-- 父子格子垂直冲突问题 -->
    <div class="top1">
        <div class="bottom1"></div>
    </div>

    <div class="bg_img"></div>

</body>
</html>